<template>
	<div class="page">
        <div class="container">
            <div v-if="status == 0">
                <div class="error-code">4<span>0</span>2</div>
                <div class="error-desc">{{ tips }}</div>
            </div>
            <div v-if=" status == 1">
                <el-tabs v-model="activeName2" type="card" @tab-click="handleClick" >
                    <el-tab-pane label="公选课" name="ones">
                        <el-table :data="tableData" border style="width: 100%" class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column prop="course_id" label="课程号" width="100"></el-table-column>
                            <el-table-column prop="course_name" label="课程名" width="200"></el-table-column>
                            <el-table-column prop="course_nature" label="课程类型" width="90"></el-table-column>
                            <el-table-column prop="course_college" label="授课学院" width="180"></el-table-column>
                            <el-table-column prop="course_teacher" label="主讲老师" width="90"></el-table-column>
                            <el-table-column prop="course_credit" label="学分" width="90"></el-table-column>
                            <el-table-column prop="course_time" label="学时" width="90"></el-table-column>
                            <el-table-column prop="course_address" label="上课地点" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="course_year" label="开课年份" width="90"></el-table-column>
                            <el-table-column prop="course_integer" label="面向年级" width="90"></el-table-column>
                            <el-table-column label="操作" width="90" align="center">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.max_selected_person > scope.row.have_selected_person " type="success" icon="el-icon-check"
                                    @click="handleSelect(scope.$index, scope.row)">选课</el-button>
                                    <el-button v-else type="danger" disabled="true" @click="handleSelect(scope.$index, scope.row)">人数已满</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="专选课" name="twos">
                        <el-table :data="tableData2" border style="width: 100%" class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column prop="course_id" label="课程号" width="100"></el-table-column>
                            <el-table-column prop="course_name" label="课程名" width="200"></el-table-column>
                            <el-table-column prop="course_nature" label="课程类型" width="90"></el-table-column>
                            <el-table-column prop="course_college" label="授课学院" width="180"></el-table-column>
                            <el-table-column prop="course_teacher" label="主讲老师" width="90"></el-table-column>
                            <el-table-column prop="course_credit" label="学分" width="90"></el-table-column>
                            <el-table-column prop="course_time" label="学时" width="90"></el-table-column>
                            <el-table-column prop="course_address" label="上课地点" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="course_year" label="开课年份" width="90"></el-table-column>
                            <el-table-column prop="course_integer" label="面向年级" width="90"></el-table-column>
                            <el-table-column label="操作" width="90" align="center">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.max_selected_person > scope.row.have_selected_person " type="success" icon="el-icon-check"
                                    @click="handleSelect(scope.$index, scope.row)">选课</el-button>
                                    <el-button v-else type="danger" disabled="true" @click="handleSelect(scope.$index, scope.row)">人数已满</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="我的选课" name="threes">
                        <el-table :data="tableData3" border style="width: 100%" class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column prop="course_id" label="课程号" width="100"></el-table-column>
                            <el-table-column prop="course_name" label="课程名" width="200"></el-table-column>
                            <el-table-column prop="course_nature" label="课程类型" width="90"></el-table-column>
                            <el-table-column prop="course_college" label="授课学院" width="180"></el-table-column>
                            <el-table-column prop="course_teacher" label="主讲老师" width="90"></el-table-column>
                            <el-table-column prop="course_credit" label="学分" width="90"></el-table-column>
                            <el-table-column prop="course_time" label="学时" width="90"></el-table-column>
                            <el-table-column prop="course_address" label="上课地点" :show-overflow-tooltip="true"></el-table-column>
                            <el-table-column prop="course_year" label="开课年份" width="90"></el-table-column>
                            <el-table-column prop="course_integer" label="面向年级" width="90"></el-table-column>
                            <el-table-column label="操作" width="90" align="center">
                                <template slot-scope="scope">
                                    <el-button type="danger" icon="el-icon-check" @click="handleDown(scope.$index, scope.row)">退课</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
                <div class="pagination" style="padding-left:500px">
                    <el-pagination background layout="sizes, prev, pager, next" :current-page="query.pageIndex" :page-size="10"
                    :page-sizes="[5, 10, 20, 30, 40, 50, 100]" :page-count="pageTotal"></el-pagination>
                </div>
            </div>
        </div>
	</div>
</template>

<script>
	import {
		getRequest
	} from '@/api/index';
	import {
		postRequest
	} from '@/api/index';
	import {
		handleUploadImg
	} from '@/utils/upload';

	export default {
		data() {
			return {
				query: {
					college: {
						college_id: 0,
						college_name: '请选择'
					},
					nature: {
						nature_id: 0,
						nature_name: '请选择'
					},
					major: {
						major_id: 0
					},
					name: '',
					pageIndex: 1,
					pageSize: 10
				},
				token: localStorage.getItem('token'),
				pageTotal: 1,
				// activeName: 'first',
				activeName2: 'ones',
				tableData: null,
				tableData2: null,
				tableData3: null,
                status: 0,
                tips:'该页面暂未开放'
			};
		},
		created() {
			this.init()
			this.getPublic();
			this.getSpec();
			this.getMine();
		},
		methods: {
			init() {
				getRequest("/public/baseinfo/address/getall", {}).then(res => {
					if (res.code == 200) {
						// console.log("Got Token:", this.token)
					} else {}
				});
				getRequest("/login/student/change/check_entry", {
					token: this.token
				}).then(res => {
					if (res.code == 200) {
						console.log("res:", res.data)
						this.status = res.data
					} else {}
				});
			},
			getPublic() {
				getRequest("/login/student/change/getpublic", {
					itemsofpage: this.query.pageSize,
					current_page: this.query.pageIndex,
					token: this.token
				}).then(res => {
					if (res.code == 200) {
						this.tableData = res.data.content;
						this.pageTotal = res.data.total_pages;
					} else {
						this.$message.error("获取失败!");
					}
				});
			},
			getSpec() {
				getRequest("/login/student/change/getspecial", {
					itemsofpage: this.query.pageSize,
					current_page: this.query.pageIndex,
					token: this.token
				}).then(res => {
					if (res.code == 200) {
						this.tableData2 = res.data.content;
						this.pageTotal = res.data.total_pages;
					} else {
						this.$message.error("获取失败!");
					}
				});
			},
			getMine() {
				getRequest("/login/student/change/getselected", {
					token: this.token
				}).then(res => {
					if (res.code == 200) {
						console.log("res:", res)
						this.tableData3 = res.data
					} else {
						this.$message.error("获取失败!");
					}
				});
			},
			handleClick(tab, event) {
				if (tab.index == 0) {
					this.getPublic()
				}
				if (tab.index == 1) {
					this.getSpec()
				}
				if (tab.index == 2) {
					this.getMine()
				}
			},
			handleSelect(index, data) {
				var id = data.course_id
				getRequest("/login/student/change/insert_course", {
					id: id,
					token: this.token
				}).then(res => {
					if (res.code == 200) {
						console.log(res.data)
						this.$message.success(`选课成功!`);
					} else {
						this.$message.error("选课失败!");
					}
				});
			},
			handleDown(index, data) {
				var id = data.course_id
				getRequest("/login/student/change/delete_course", {
					id: id,
					token: this.token
				}).then(res => {
					if (res.code == 200) {
						this.getMine()
						this.$message.success(`退课成功!`);
					} else {
						this.$message.error(res.msg);
					}
				});
			}
		}
	};
</script>

<style>
	.hide .el-upload--picture-card {
		display: none;
	}

	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	.btn-add {
		float: right;
	}
    .error-code {
    line-height: 1;
    font-size: 250px;
    font-weight: bolder;
    color: #f02d2d;
}
.error-code span {
    color: #00a854;
}
.error-desc {
    font-size: 30px;
    color: #777;
}
.container {
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
</style>
